/**
 * 这里用于配置基础的webpack配置
 */

const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const pages = require('./page')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { type } = require('os')
//获取到入口文件的配置
function getEntry(){
   const entry={}
   for (const key in pages) {
    entry[key]=pages[key].js //设置属性值和属性名   index："./xxx.js"
   }
   console.log(entry)
   return entry
}

//根据多个页面配置多个模板文件  HTMLWebpackPlugin 配置
function getHtmlPlugins(){
    const plugin = [];
    for (const key in pages) {
        plugin.push( new HtmlWebpackPlugin({
            chunks:[key],//html需要引入的chunk（打包后的入口文件）
            template: path.resolve(__dirname,pages[key].html),
            filename:pages[key].out
        })
    )
    }
    console.log(plugin)
    return plugin
}

//webpack的基础配置
module.exports={
    // 开发服务器 dev-server也会读取entry和output的配置，只是说他不会把真实的文件写在硬盘上而是存在内存中
    entry: getEntry(),
    output:{
        filename:'[name].[chunkhash:5].js',
        publicPath:'/',//这个配置不会影响到文件在硬盘上的位置,会影响打包后各种 URL 的写法。决定了「浏览器在请求资源时」在文件名前面自动拼上的那一段 URL 前缀
        path: path.resolve(__dirname,"dist")
    },
    resolve:{
        alias:{
            '@':path.resolve(__dirname,"src"),//设置路径别名
            _:__dirname,
        }
    },
    stats:{ //打包时的日志配置
        colors:true,
        modules:false, 
        children:false,
        entrypoints:false,
    },
    module:{ //使用loader处理一些非js文件 
        rules:[  //同一个文件可以命中多个test,一个规则匹配成功后,会继续匹配下一个规则
            {
                test: /\.(png)|(gif)|(jpg)|(svg)|(bmp)|(eot)|(woff)|(ttf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[hash:5].[ext]'//设置图片的输出路径和文件名
                },
                parser: {
                    dataUrlCondition: {
                      maxSize: 8 * 1024 // 8kb,小于此大小的文件会被转为 base6
                    }
                  }
            },
            {
                test:/\.js$/,
                use:['babel-loader']
            },
            {
                test:/\.(css)|(pcss)$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], //postcss-loader 用于处理css的兼容性问题,读取postcss.config.js文件
            }
        ]

    },
    plugins:[
        ...getHtmlPlugins(),
        new MiniCssExtractPlugin({
            filename: '[name].css', // 输出的 CSS 文件名
          }),
          new CleanWebpackPlugin(),//应用 清除输出目录 插件
          new CopyWebpackPlugin({  //设置需要拷贝的静态资源目录
            patterns: [
              { from: 'public', to: './' }//将public中的文件拷贝到根目录下
            ],
          }),
    ]
}

